<template>
	<div class="org-list-card">
		<div
			v-if="cardDetail.dept_id === checkDetail.cur_dept.dept_id"
			class="checked"
		>
			<div class="low-code icondui"></div>
		</div>
		<div
			class="org-label-container"
			@click="changeOrg(cardDetail.label_id, cardDetail.dept_id)"
		>
			<div class="dept-path">
				{{ cardDetail.dept_name }}
			</div>
			<div class="org-info">
				<span class="org-id">{{ '组织ID：' + cardDetail.dept_id }}</span>
				<span v-if="cardDetail.org_pattern_name" class="org-type">{{
					cardDetail.org_pattern_name
				}}</span>
			</div>
		</div>

		<van-radio
			:name="1"
			v-model="cardDetail.default_dept_flag"
			@click="
				setDefault(
					cardDetail.dept_id,
					cardDetail.label_id,
					defaultDept
						? defaultDept.dept_id
						: checkDetail.default_dept
						? checkDetail.default_dept.dept_id
						: '',
					defaultDept
						? defaultDept.label_id
						: checkDetail.default_dept
						? checkDetail.default_dept.label_id
						: ''
				)
			"
			icon-size="16"
			checked-color="var(--bl-brand-c)"
			>{{ $t('personalCenter.DefaultLogin', '默认登录') }}</van-radio
		>
	</div>
</template>

<script lang="ts" setup>
import Label from './Label.vue'
import { apiInit } from '@/services'
import { onMounted, ref } from 'vue'
// import { t } from '@/entry_mobile/locales/index'
import { i18n } from '@/locales'
const { $t } = i18n
import { string } from 'vue-types'
const api = apiInit()
const emit = defineEmits(['defauleLoginChange'])
const props = defineProps({
	cardDetail: { type: Object },
	checkDetail: { type: Object, default: {} },
	defaultDept: { type: Object },
	isBq: { type: Boolean },
})

// private readonly personalDetailList!: any
let checked = ref<string>('')

const tenantDetail = ref({})
const changeOrg = async (labelId, deptId) => {
	let res = await api.baseAuto.SwitchDeptEmployeePrivateV1POST({
		query: {
			deptId: deptId,
			labelId: labelId,
		},
	})
	if (res.code === '000000') {
		location.reload()
	}
}
const setDefault = async (
	newDeptId: any,
	newLabelId: any,
	oldDeoptId: any,
	oldLabelId: any
) => {
	let res = await api.baseAuto.SetDefaultDeptInternalMulDeptPrivateV1POST({
		payload: {
			new_dept_id: newDeptId,
			new_label_id: newLabelId,
			old_dept_id: oldDeoptId,
			old_label_id: oldLabelId,
		},
	})
	if (res) {
		emit('defauleLoginChange', newDeptId)
	}
}
onMounted(() => {
	// checked.value = props.checkDetail.default_dept.dept_id
	tenantDetail.value = JSON.parse(
		localStorage.getItem('tenantDetail') || ''
	).data
})
</script>
<style scoped lang="less">
.org-list-card {
	position: relative;
	background-color: #fff;
	border-radius: 4px;
	padding: 10px;
	margin-bottom: 12px;

	.checked {
		width: 24px;
		height: 24px;
		clip-path: polygon(0 0, 100% 0, 100% 100%);
		background: var(--bl-brand-c);
		position: absolute;
		top: 0;
		right: 0;
		.icondui {
			position: absolute;
			top: 50%;
			left: 13px;
			transform: translateY(-50%);
			color: #fff;
			font-size: 1px;
		}
	}
	.org-label-container {
		border-bottom: 1px solid #e8eaed;
		padding-bottom: 6px;
		margin-bottom: 6px;
		.dept-path {
			font-family: 'PingFang SC';
			font-style: normal;
			font-weight: 400;
			font-size: 14px;
			line-height: 20px;
			margin-top: -2px;
			color: #1f2329;
		}
		.org-info {
			.org-id,
			.org-type {
				display: inline-block;
				font-family: 'PingFang SC';
				font-style: normal;
				font-weight: 400;
				font-size: 12px;
				color: #8f959e;
				height: 20px;
				line-height: 20px;
				padding: 0 7px;
				background: #f2f4f7;
				border-radius: 4px;
				margin-left: 4px;
			}
			.org-id {
				margin-left: 0;
			}
		}
	}
	/deep/.van-radio__label {
		font-family: 'PingFang SC';
		font-style: normal;
		font-weight: 400;
		font-size: 13px;
		line-height: 20px;
		color: #646a73;
	}
}
</style>
